<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
<link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../../node_modules/moment/moment.js'></script>
<script src='../../node_modules/jquery/dist/jquery.js'></script>
<script src='../../dist/fullcalendar.js'></script>
<script>

  $(document).ready(function() {
    var count = 0;
    var intervalID;

    $('#start').on('click', start);
    $('#stop').on('click', stop);

    function start() {
      initCalendar();
      intervalID = setInterval(function() {
        destroyCalendar();
        initCalendar();
        if (count > 100) {
          stop();
        }
        count++;
      }, 200);
    }

    function stop() {
      if (intervalID) {
        clearInterval(intervalID);
        intervalID = null;
      }
      destroyCalendar();
    }

    function initCalendar() {
      $('#calendar').fullCalendar({
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,week,day'
        },
        initialDate: '2014-06-12',
        initialView: 'dayGridMonth', // week
        editable: true,
        selectable: true,
        droppable: true,
        events: [
          {
            title: 'All Day Event',
            start: '2014-06-01'
          },
          {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10'
          },
          {
            groupId: 999,
            title: 'Repeating Event',
            start: '2014-06-09T16:00:00'
          },
          {
            groupId: 999,
            title: 'Repeating Event',
            start: '2014-06-16T16:00:00'
          },
          {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2014-06-12T12:00:00'
          },
          {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-06-28'
          }
        ]
      });
    }

    function destroyCalendar() {
      $('#calendar').fullCalendar('destroy');
    }

  });

</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    width: 900px;
    margin: 40px auto;
  }

</style>
</head>
<body>

  <button id='start'>START</button>
  <button id='stop'>STOP</button>

  <div id='calendar'></div>

</body>
</html>
